

<script setup>
    import { ref } from 'vue';
    import router from '../router';
    

    const selectedKeys = ref(['1']);
    const openKeys = ref(['sub1']);

    const items = ref([
        {
            key: '1',
            label: '主页',
            title: '主页',
        },
        {
            key: "2",
            label: "数据库",
            title: "数据库"
        },
        {
            key: "3",
            label: "群聊管理",
            title: "群聊管理"
        },
        {
            key: "4",
            label: "群聊直播间管理",
            title: "群聊直播间管理"
        }
    ]);

    router.push({
        path: "/admin/home"
    });


    function clickMenuItem(e)
    {
        if (e.key === "1")
            router.push("/admin/home");
        else if (e.key === "2")
            router.push("/admin/db");
        else if (e.key === "3")
            router.push("/admin/group");
        else if (e.key === "4")
            router.push("/admin/glive");
    }

</script>

<template>

    <a-layout>
        <a-layout-sider
            collapsed-width="0"
        >
            <div class="logo"></div>
            <a-menu
                v-model:openKeys="openKeys"
                v-model:selectedKeys="selectedKeys"
                :items="items"
                theme="dark"
                mode="inline"
                @click="clickMenuItem"
            />
        </a-layout-sider>

        <a-layout>
            <a-layout-header :style="{ background: '#fff', padding: 0, }">
                
            </a-layout-header>
            <a-layout-content :style="{ margin: '24px 16px 0', overflow: 'auto' }">
                <RouterView />
            </a-layout-content>
            <a-layout-footer style="text-align: center">
                后台管理 Created by weifei
            </a-layout-footer>
        </a-layout>


    </a-layout>
    
    
    


    
</template>


<style>


    .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }


</style>

